<!-- 登录页面 -->
<template>
	<view>
		<view class="loginLogo">
			<form @submit="onSubmit(true, $event)" class="loginContent">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar"
						:src="formData.avatarUrl?formData.avatarUrl:'/static/tx.png'">
					</image>
					<text class="loginLogoText" v-if="isShow">授权头像</text>
				</button>
				<view class="nameContent">
					<view class="title">昵称</view>
					<input name="nickName" type="nickname" placeholder="请填写昵称" class="weui-input"
						v-model="formData.nickName" />
				</view>
 
				<view class="loginBtn">
					<button class="btn" form-type="submit" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">手机号一键登录</button>
				</view>
			</form>
		</view>
 
	</view>
</template>
 
<script>
	
	export default {
		data() {
			return {
				iv: "",
				encryptedData: '',
				phoneNum: "",
				openId: '',
				formData: {
					nickName: '',
					avatarUrl: ''
				},
				isShow: true,
				token: ""
			}
		},
		computed: {
			
		},
		watch: {
			formData: {
				handler(newVal, oldValue) {
					if (newVal.avatarUrl) {
						this.isShow = false;//监测isShow，如果授权头像了就隐藏 授权头像 字样
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			updateUserAllInfoData(v) {
				this.updateUserAllInfo(v);
			},
			//获取微信头像
			onChooseAvatar(e) {
				this.formData.avatarUrl = e.detail.avatarUrl;
				console.log("eeee", e.detail);
			},
			onSubmit(confirm, event) {
				if (confirm) {
					try {
						let {
							nickName
						} = event.detail.value;
						this.formData.nickName = nickName;
					} catch (e) {
						//TODO handle the exception
						uni.showToast({
							icon: 'none',
							title: e.message
						});
						return;
					}
				}
			},
			// 微信获取手机号信息
			getPhoneNumber(data) {
				if (this.formData.avatarUrl && this.formData.nickName) {
					//微信小程序返回的相关数据
					this.iv = data.detail.iv;
					this.encryptedData = data.detail.encryptedData;
					uni.showToast({
						title: '登录中',
						icon: 'loading',
						duration: 1000,
					});
					//处理头像链接
					this.uploadImage(this.formData.avatarUrl);
 
				} else {
					uni.showToast({
						title: `请选择头像或输入昵称~`,
						icon: 'none'
					});
				}
			},
			uniLogin() {
				uni.login({
					provider: 'univerify',
					success: res => {
						console.log(res)
						console.log("头像和昵称---", this.formData.avatarUrl, this.formData.nickName);
						//请求后台,获取openId
						uni.request({
							url: `https://qmhly.hls.com/nine/appletLogin`,
							method: 'POST',
							data: {
								code: res.code,
								nickName: this.formData.nickName,
								avatarUrl: this.formData.avatarUrl
							},
							dataType: 'json',
							sslVerify: false,
							success: (res1) => {
								console.log("用户登录返回数据----", res1.data.data);
								this.openId = res1.data.data.openId;
								this.token = res1.data.data.user.access_token;
								let params = {
									sessionKey: res1.data.data.sessionKey,
									iv: this.iv,
									encryptedData: this.encryptedData,
									id: res1.data.data.openId,
								}
 
								//获取用户手机号
								appletPhone(params).then(res2 => {
									console.log("手机号返回---", res2);
									this.phoneNum = res2.data.phoneNumber;
									//登陆成功后，重新查询用户身份信息
									this.getUserInfo(this.openId);
								})
 
								//存储token至本地
								uni.setStorage({
									key: 'access_token',
									data: this.token,
									success: function() {
										console.log(
											'access_token存储成功'
										);
									},
									fail: function(error) {
										console.error(
											'access_token存储失败:',
											error);
									}
								});
 
								//将openId、nickName、avatarUrl存储到本地
								// 存储OpenID
								uni.setStorage({
									key: 'openId',
									data: res1.data.data.openId,
									success: function() {
										console.log(
											'OpenID存储成功'
										);
									},
									fail: function(error) {
										console.error(
											'OpenID存储失败:',
											error);
									}
								});
								uni.setStorage({
									key: 'nickName',
									data: this.formData.nickName,
									success: function() {
										console.log(
											'nickName存储成功'
										);
									},
									fail: function(error) {
										console.error(
											'nickName存储失败:',
											error);
									}
								});
								uni.setStorage({
									key: 'avatarUrl',
									data: this.formData.avatarUrl,
									success: function() {
										console.log(
											'avatarUrl存储成功'
										);
									},
									fail: function(error) {
										console.error(
											'avatarUrl存储失败:',
											error);
									}
								});
							}
						})
 
					}
				});
			},
			//获取该登录用户的信息
			async getUserInfo(id) {
				let result2 = await nineSelect({
					id: id
				});
				let tempArr = result2.data;
                
                //以下是用户等级字段的处理
				if (tempArr.status == 1) { //注册用户
					tempArr.levelImg =
						'https://cn-chengdu.aliyuncs.com/hls/wode/zhuce.png';
					tempArr.levelName = '注册会员';
				} else if (tempArr.status ==
					2) { //银牌会员
					tempArr.levelImg =
						'https://cn-chengdu.aliyuncs.com/hls/wode/chuji.png';
					tempArr.levelName = '银牌会员';
				} else if (tempArr.status ==
					3) { //金牌会员
					tempArr.levelImg =
						'https://cn-chengdu.aliyuncs.com/hls/wode/gaoji.png';
					tempArr.levelName = '金牌会员';
				}
				tempArr.points = '0'; //积分功能暂未使用，为所有账号初始化为0
				
				//将用户信息存储进仓库
				this.updateUserAllInfoData(tempArr);
				console.log("登录 用户信息--", this.userInfo);
 
				uni.showToast({
					title: `登陆成功~`,
					icon: 'none'
				});
 
				//跳转回个人中心页面
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/wode/wode`,
						success() {
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						},
						fail(e) {
							console.error(e);
						}
					})
				}, 2000);
			},
			//头像图片持久化
			uploadImage(url1) {
				//uni.uploadFile将微信返回的临时地址转成文件流传输给后端，从而上传服务器，拿到永久地址
				uni.uploadFile({
					url: `https://qmhly.hls.com/nine/getImgUrl`,
					filePath: url1,
					name: 'file',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					formData: {
						'user': this.formData.nickName
					},
					success: (uploadFileRes) => {
						this.formData.avatarUrl = JSON.parse(uploadFileRes.data).data;
 
						//进入登录流程
						this.uniLogin();
					}
				});
			},
		}
	}
</script>
 
<style scoped lang="scss">
	.avatar-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;
 
		.avatar {
			height: 120rpx;
			width: 120rpx;
			border-radius: 20rpx;
		}
	}
 
	.avatar-wrapper::after {
		border: none;
	}
 
	.nameContent {
		display: flex;
		margin: 70rpx 0;
		border-top: 1px solid #eee;
		border-bottom: 2rpx solid #eee;
		padding: 20rpx 40rpx;
		width: 100vw;
		box-sizing: border-box;
		font-size: 28rpx;
		align-items: center;
 
		.title {
			margin-right: 40rpx;
		}
	}
 
	.loginLogo {
		height: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;
 
		.loginContent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
 
			.loginLogoText {
				font-size: 24rpx;
				color: #828282;
				margin-top: 20rpx;
			}
		}
	}
 
	.loginBtn {
		width: 100%;
 
		.btn {
			width: 80%;
			border-radius: 20rpx;
			background-color: #ee3236;
			color: white;
		}
	}
</style>